<!--
 * @Date: 2023-05-19 17:58:07
 * @LastEditTime: 2023-05-30 15:48:49

 * 介绍:
-->
<script lang="ts" setup>
import { CollapseItemProps } from "vant";
import { filterObject } from "@@/utils/tools/object";

// const props = defineProps<{
//   props?: StrNumber;
//   icon?: string;
//   size?: "large";
//   title?: StrNumber;
//   value?: StrNumber;
//   label?: StrNumber;
//   border?: boolean;
//   isLink?: boolean;
//   disabled?: boolean;
//   readonly?: boolean;
//   lazyRender?: boolean;
//   titleClass?: string;
//   valueClass?: string;
//   labelClass?: string;
// }>();
// const slot = useSlots();
const props = defineProps<Partial<CollapseItemProps>>();
const slots = defineSlots<{
  title?: (props: {}) => any;
  value?: (props: {}) => any;
  label?: (props: {}) => any;
  icon?: (props: {}) => any;
  "right-icon"?: (props: {}) => any;
}>();
</script>
<template>
  <van-collapse-item v-bind="filterObject(props)" class="RcollapseItem shadow">
    <!-- <template v-if="slot.default" #default>
      <slot></slot>
    </template>
    <template v-if="slot.title" #title>
      <slot name="title"></slot>
    </template>
    <template v-if="slot.value" #value>
      <slot name="value"></slot>
    </template>
    <template v-if="slot.label" #label>
      <slot name="label"></slot>
    </template>
    <template v-if="slot.icon" #icon>
      <slot name="icon"></slot>
    </template>
    <template v-if="slot['right-icon']" #right-icon>
      <slot name="right-icon"></slot>
    </template> -->

    <template #[name]="slotProps" v-for="(slotItem, name) in slots">
      <slot :name="name" :="{ ...slotProps }"></slot>
    </template>
  </van-collapse-item>
</template>
<style lang="scss">
.RcollapseItem {
  background-color: var(--C-B1);
  .van-cell {
    padding: var(--gap-sm);
  }
  .van-collapse-item__title[aria-expanded="true"] {
    position: relative;
    &::after {
      display: block;
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: calc(100% - var(--gap-md) * 2);
      border-bottom: solid 1rem var(--C-T1-O1);
    }
  }
}
.van-collapse-item--border:after {
  border-top: none;
}
</style>
